<template>
  <div class="goods-detail">
    <div v-html="htmlStr" v-show="false"></div>
    <mt-swipe :auto="4000" v-if="goodsFullInfoLen != 0">
      <mt-swipe-item v-for="item in getData.wareImage" :key="item.big">
        <img :src="item.big" />
      </mt-swipe-item>
    </mt-swipe>
    <div v-if="goodsFullInfoLen != 0" class="pro-infos-box">
      <h2 class="pro-price">￥{{ getData.priceInfo.jdPrice }}</h2>
      <h4 class="pro-name">{{ getData.skuInfo.skuName }}</h4>

      <div class="params-box">
        <h1>商品参数</h1>
        <div>编号: {{ getData.skuInfo.brandId }}</div>
        <div>品牌: {{ getData.skuInfo.skuName.slice(0, 2) }}</div>
        <div>规模: 312 X 482</div>
        <div>产地: 上海</div>
      </div>

      <div class="opear-btn">
        <mt-button type="primary" @click="collectPro">加入收藏夹</mt-button>
        <mt-button type="danger" @click="joinPro">加入购物车</mt-button>
      </div>

      <router-link :to="{ name: 'shopCart' }" replace>
        <div class="cart-enter">
          <span class="iconfont icon-gouwuche"></span>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
// let dataScript = null;
export default {
  name: "GoodsDetail",
  data() {
    return {
      htmlStr: "",
      goodsFullInfo: {},
      goodsInfo: {},
    };
  },
  props: ["skuid"],
  created() {
    this.$http({
      url: "/item/view",
      params: {
        sku: this.skuid,
      },
    })
      .then((res) => {
        this.htmlStr += res;
      })
      .catch((err) => {
        console.log(err);
      });
  },
  watch: {
    htmlStr() {
      this.$nextTick(() => {
        let scripts = document.querySelectorAll("script");
        let tarScript = null;
        for (let i = 0; i < scripts.length; i++) {
          if (scripts[i].innerHTML.indexOf("window._ITEM_DATA") != -1) {
            tarScript = scripts[i].innerHTML;
            // console.log("tarScript:", tarScript);
            break;
          }
        }
        eval(tarScript.replace(/<[/]?script>/gi, ""));
        this.goodsFullInfo = window._ITEM_DATA;
      });
    },
  },
  mounted() {},
  methods: {
    collectPro() {},
    joinPro() {
      let goods = {
        img: this.getData.wareImage[0].small,
        price: Number(this.getData.priceInfo.jdPrice),
        name: this.getData.skuInfo.skuName,
        brandId: Number(this.getData.skuInfo.brandId),
        num: 1,
      };
      this.$store.commit("addCart", goods);
      this.$store.commit("saveCart");
    },
  },
  computed: {
    goodsFullInfoLen() {
      return Object.keys(this.goodsFullInfo).length;
    },
    goodsInfoLen() {
      return Object.keys(this.goodsInfo).length;
    },
    getData() {
      return this.goodsFullInfo.domain.data;
    },
  },
};
</script>

<style scopeed>
.cart-enter {
  position: fixed;
  bottom: calc(var(--tabbar-height) + 20px);
  background-color: #c7c7c7;
  font-size: 12px;
  right: 20px;
  line-height: 1;
  vertical-align: middle;
  padding: 11px;
  border-radius: 50%;
}
.mint-swipe img {
  width: 100%;
}
.mint-swipe {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  height: 414px;
}

.pro-infos-box {
  margin-top: 20px;
  padding: 0 12px;
}
.pro-name {
  font-size: 16px;
  color: #333;
}
.pro-price {
  color: var(--red);
  font-size: 22px;
}
.params-box {
  margin-top: 20px;
  font-size: 16px;
  color: var(--gray);
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}
.params-box h1 {
  font-size: 18px;
  color: #333;
  text-align: center;
}
.opear-btn button + button {
  margin-left: 10px;
}
.opear-btn {
  margin: 20px 0;
  text-align: center;
}
</style>